<template>
	<div class="ai_chat_view">
		<div class="ai_chat_container">
			<el-card class="ai_chat_card">
				<template #header>
					<div class="ai_chat_header">
						<div class="ai_chat_title">AI助手</div>
					</div>
				</template>
				<div class="ai_chat_content">
					<div class="chat_messages" ref="chatMessagesContainer">
						<div v-for="(item, index) in chatMessages" :key="index" 
							:class="['message', item.type === 'user' ? 'user-message' : 'ai-message']">
							<div class="message-content">{{item.content}}</div>
						</div>
					</div>
					<div class="chat_input">
						<el-input
							v-model="chatInput"
							type="textarea"
							:rows="3"
							placeholder="请输入您的问题..."
							@keyup.enter.ctrl="sendMessage"
						/>
						<el-button type="primary" @click="sendMessage" :loading="sending">
							发送 (Ctrl + Enter)
						</el-button>
					</div>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		nextTick,
		getCurrentInstance
	} from 'vue';
	
	const context = getCurrentInstance()?.appContext.config.globalProperties;
	
	// AI聊天相关
	const chatMessages = ref([])
	const chatInput = ref('')
	const sending = ref(false)

	const sendMessage = () => {
		if (!chatInput.value.trim()) return
		if (sending.value) return
		
		// 添加用户消息
		chatMessages.value.push({
			type: 'user',
			content: chatInput.value
		})
		
		sending.value = true
		// 调用AI接口
		context?.$http({
			url: 'ai/questAI',
			method: 'get',
			params: {
				content: chatInput.value
			}
		}).then(res => {
			if (res.data.code === 0) {
				// 添加AI回复
				chatMessages.value.push({
					type: 'ai',
					content: res.data.msg
				})
			} else {
				context?.$message.error('获取AI回复失败')
			}
		}).catch(() => {
			context?.$message.error('获取AI回复失败')
		}).finally(() => {
			sending.value = false
			chatInput.value = ''
			// 滚动到底部
			nextTick(() => {
				const container = document.querySelector('.chat_messages')
				if (container) {
					container.scrollTop = container.scrollHeight
				}
			})
		})
	}
</script>

<style lang="scss" scoped>
.ai_chat_view {
	padding: 20px;
	min-height: 100vh;
	background: #f5f7fa;
	
	.ai_chat_container {
		max-width: 1000px;
		margin: 0 auto;
		
		.ai_chat_card {
			background: #fff;
			box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
			
			.ai_chat_header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.ai_chat_title {
					font-size: 18px;
					font-weight: bold;
					color: #333;
				}
			}
			
			.ai_chat_content {
				padding: 20px;
				
				.chat_messages {
					height: 500px;
					overflow-y: auto;
					margin-bottom: 20px;
					padding: 10px;
					background: #f5f7fa;
					border-radius: 4px;
					
					.message {
						margin-bottom: 15px;
						
						.message-content {
							padding: 10px 15px;
							border-radius: 4px;
							max-width: 80%;
							word-break: break-word;
						}
					}
					
					.user-message {
						display: flex;
						justify-content: flex-end;
						
						.message-content {
							background: #409EFF;
							color: white;
						}
					}
					
					.ai-message {
						display: flex;
						justify-content: flex-start;
						
						.message-content {
							background: white;
							color: #333;
						}
					}
				}
				
				.chat_input {
					display: flex;
					gap: 10px;
					
					.el-textarea {
						flex: 1;
					}
					
					.el-button {
						align-self: flex-end;
					}
				}
			}
		}
	}
}
</style> 